<template>
  <div>
    <el-form
      ref="formItem"
      :rules="formItemRule"
      :model="formItem"
      @submit.native.prevent
      label-width="100px"
    >
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="可提现金额">
            <el-input v-model="rest" :disabled="true" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="真实姓名">
            <el-input v-model="formItem.realName" placeholder="请输入真实姓名" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="提现方式">
            <el-radio-group v-model="formItem.extractType" @on-change="typeChange">
              <el-radio label="bank">银行卡</el-radio>
              <el-radio label="wx">微信</el-radio>
              <el-radio label="alipay">支付宝</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <div v-if="formItem.extractType == 'bank'">
            <el-form-item label="银行">
              <el-select v-model="formItem.bankAddress">
                <el-option v-for="item in bankList" :key="item" :value="item">{{item}}</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="银行卡号">
              <el-input v-model="formItem.backCode" placeholder="请输入银行卡号" />
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="24">
          <div v-if="formItem.extractType == 'wx'">
            <el-form-item label="账号">
              <el-input v-model="formItem.weixin" placeholder="请输入微信账号" />
            </el-form-item>
          </div>
          <div v-if="formItem.extractType == 'alipay'">
            <el-form-item label="账号">
              <el-input v-model="formItem.alipayCode" placeholder="请输入支付宝账号" />
            </el-form-item>
          </div>
          <div v-if="formItem.extractType != 'bank'">
            <el-form-item label="收款码：">
              <el-button type="primary">
                <label for="uploads">选择本地图片</label>
                <input
                  type="file"
                  id="uploads"
                  class="inputFile"
                  accept="image/png, image/jpeg, image/gif, image/jpg"
                  @change="uploadImg($event)"
                />
              </el-button>
              <div class="pictrue" v-if="formItem.qrcodeUrl">
                <img v-lazy="formItem.qrcodeUrl" />
              </div>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="24">
          <el-form-item label="提现">
            <el-input-number v-model="formItem.money" :step="1" :min="Number(minPrice)"></el-input-number>
            <div style="color: #999;">（至少提现{{minPrice}}）</div>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="备注">
            <el-input
              v-model="formItem.mark"
              type="textarea"
              :autosize="{minRows:3,maxRows:4}"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item style="display:flex; justify-content: reverse">
            <el-button type="primary" @click="submit">提交</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
  
  <script>
import { saveAgentExtractApi, uploadPicture, closingConfigApi } from '@/api/agent';

export default {
  props: {
    id: {
      default: 0,
    },
    rest: {
      default: 0,
    },
  },
  data() {
    return {
      modalPic: false,
      isChoice: '单选',
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      formItem: {
        realName: '',
        extractType: 'bank',
        bankAddress: '',
        backCode: '',
        alipayCode: '',
        weixin: '',
        money: '',
        mark: '',
        type: 3,
        status: 0,
        qrcodeUrl: '',
      },
      withdrawal_fee: 0,
      true_price: 0,
      formItemRule: {},
      bankList: [],
      minPrice: 0,
    };
  },
  created() {
    this.getBank();
  },
  mounted() {
    this.$nextTick(function () {
      if (this.id) {
        this.getDetail();
      }
    });
  },
  methods: {
    typeChange() {
      console.log(this.formItem.extractType);
    },
    getBank() {
      closingConfigApi().then((res) => {
        let data = res;
        console.log(res);
        this.bankList = data.bankList;
        this.minPrice = data.minPrice;
      });
    },

    submit() {
      // if (this.formItem.money > this.rest) return this.$message.warning('提现金额超过可提现金额');

      let form = this.formItem;
      saveAgentExtractApi(form)
        .then((res) => {
          this.$message.success('提交成功');
          this.$emit('submitSuccess');
        })
        .catch((err) => {
          return this.$message.error(err.msg);
        });
    },
    uploadImg(e) {
      //上传图片
      var file = e.target.files[0];
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        this.$message.warning('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种');
        return false;
      }
      const formData = new FormData();
      formData.append('image', file);
      uploadPicture(formData).then((res) => {
        console.log(res);
        this.formItem.qrcodeUrl = res.url;
      });
    },
    handleRemove() {
      this.formItem.qrcodeUrl = '';
    },
  },
};
</script>
  
  <style lang="stylus" scoped>
  .inputFile {
    width: 180px;
    position: absolute;
    clip: rect(0 0 0 0);
  }

  .tabBox_img {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .picBox {
    display: inline-block;
    cursor: pointer;

    .upLoad {
      width: 58px;
      height: 58px;
      line-height: 58px;
      border: 1px dotted rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      background: rgba(0, 0, 0, 0.02);
    }

    .pictrue {
      width: 60px;
      height: 60px;
      border: 1px dotted rgba(0, 0, 0, 0.1);
      margin-right: 10px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .iconfont {
      color: #898989;
    }
  }
</style>